<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="业务标题">
              <a-input placeholder="请输入业务标题" v-model="queryParam.bpmBizTitle"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="流程名称">
              <a-input placeholder="请输入流程名称" v-model="queryParam.processDefinitionName"></a-input>
            </a-form-item>
          </a-col>
          <!--
          <a-col :md="6" :sm="12">
            <a-form-item label="流程编号">
              <a-input placeholder="请输入流程编号" v-model="queryParam.processDefinitionId"></a-input>
            </a-form-item>
          </a-col> -->
          <a-col :md="8" :sm="12">
            <a-form-item label="任务发起人">
              <a-input-search placeholder="选择任务发起人" readOnly @search="handleSelect" v-model="model.userName">
                <a-button slot="enterButton" icon="search">选择</a-button>
              </a-input-search>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item label="办理时间"  >
              <a-range-picker
                showTime
                format="YYYY-MM-DD HH:mm"
                :placeholder="['开始时间', '结束时间']"
                v-model="createTimeRange"
                @change="(dates, dateStrs) => { queryParam.createTime_start = dateStrs[0]; queryParam.createTime_end = dateStrs[1] }"
                style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        :scroll="{x: scrollX}"
        ref="table"
        size="middle"
        :components="draggableComponent"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <template v-if="record.taskAssigneeId&&record.taskAssigneeId!=''">
            <a  @click="handleProcess(record)">
              办理
            </a>
            <template v-if="record.isForward=='1'">
            <a-divider type="vertical" />
              <a @click.stop="selectForward(record)">
                转发
              </a>
            </template>
            <template v-if="record.isEntrust=='1'">
              <a-divider type="vertical" />
              <a  @click.stop="selectEntruster(record)">
                  委托
              </a>
            </template>
            <template v-if="record.isTransfer=='1'">
              <a-divider type="vertical" />
              <a  @click.stop="selectTransfer(record)">
                  转办
              </a>
            </template>
          </template>
          <template v-else>
            <a  @click.stop="handleClaimNew(record)" >
              签收
            </a>
            <a-divider type="vertical" />
            <a @click.stop="handleViewDetail(record)">
              查看
            </a>
            <template v-if="record.isIgnore=='1'">
              <a-divider type="vertical" />
              <a @click.stop="handleIgnore(record)">
                忽略
              </a>
            </template>
          </template>

        </span>
        <!-- 字符串超长截取省略号显示-->
        <span slot="bpmBizTitle" slot-scope="text, record" class="bpmBizTitle-title">
          <a-icon title="催办提醒" v-if="record.taskUrge" theme="twoTone" twoToneColor="#eb2f96"  @click.stop="taskNotify(record)" type="notification"/>
          <!-- <j-ellipsis :value="text" :length="15"/> -->
          <span class="bpmBizTitle-text">{{ text }}</span>
        </span>
        <!-- <span slot="processDefinitionId" slot-scope="text, record">
          <j-ellipsis :value="text" :length="18"/>
        </span> -->
        <!-- <span slot="processDefinitionName" slot-scope="text, record">
          <j-ellipsis :value="text" :length="15"/>
        </span> -->

      </a-table>
    </div>
    <!-- 弹出框 -->
    <task-deal-modal ref="taskDealModal" :path="path" :formData="formData" @ok="handleOk"></task-deal-modal>
    <TaskSignModal ref="taskSignModal" :path="path" :formData="formData" ></TaskSignModal>
    <select-entruster-modal ref="selectEntrusterModal" @selectFinished="handleEntruster"></select-entruster-modal>
    <select-entruster-modal ref="selectTransferModal" @selectFinished="handleTransfer"></select-entruster-modal>
    <task-notify-me-modal ref="taskNotifyMeModal"></task-notify-me-modal>
    <select-single-user-modal ref="selectSingleUserModal" @selectFinished="selectUserOK"></select-single-user-modal>
    <select-forward-modal ref="selectForwardModal" @selectFinished="handleForward"></select-forward-modal>
    <a-modal v-model="signVisible" title="确认签收吗" :width="450" :maskClosable="false">
      <template slot="footer">
        <a-button type="primary" @click="handleOkNew">确认</a-button>
        <a-button @click="signVisible = false">取消</a-button>
      </template>
      <p><a-icon type="question-circle" style="color: #faad14;margin-right: 5px"/>是否签收该任务?</p>
    </a-modal>
  </a-card>
</template>

<script>
  import {putAction} from '@/api/manage'
  import TaskDealModal from "./TaskDealModal";
  import TaskSignModal from './TaskSignModal'; // 签收
  import SelectEntrusterModal from "./form/SelectEntrusterModal";
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {BpmNodeInfoMixin} from '@/views/modules/bpm/mixins/BpmNodeInfoMixin'
  import TaskNotifyMeModal from "../../extbpm/process/TaskNotifyMeModal.vue";
  import SelectSingleUserModal from "./form/SelectSingleUserModal.vue";
  import SelectForwardModal from '@/views/modules/bpm/task/form/SelectForwardModal';
  

  export default {
    props: {
      tableValue: {
        type: String,
        default: ''
      }
    },
    name: "MyRunningTaskList",
    mixins: [JeecgListMixin,BpmNodeInfoMixin],
    components: {
      SelectSingleUserModal,
      TaskNotifyMeModal,
      SelectEntrusterModal,
      TaskDealModal,
      TaskSignModal,
      SelectForwardModal,
      JEllipsis
    },
    data () {
      return {
        createTimeRange: [],
        description: '我的任务',
        // 查询条件
        queryParam: {},
        model:{
          userName:""
        },
        // 表头
        columns: [
          {
            title: '序号',
            width: 60,
            dataIndex: '',
            key: 'rowIndex',
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          }, {
            title: '业务标题',
            align: 'center',
            width: 120,
            dataIndex: 'bpmBizTitle',
            scopedSlots: { customRender: 'bpmBizTitle' }
          }, {
            title: '流程名称',
            align: 'center',
            width: 100,
            dataIndex: 'processDefinitionName',
            ellipsis: true,
            // scopedSlots: { customRender: 'processDefinitionName' }
          },
          // {
          //   title: '流程实例',
          //   width:100,
          //   align: 'center',
          //   dataIndex: 'processInstanceId'
          // },
          {
            title: '发起人',
            width:100,
            ellipsis: true,
            align: 'center',
            dataIndex: 'processApplyUserName'
          }, {
            title: '开始时间',
            align: 'center',
            width: 80,
            ellipsis: true,
            dataIndex: 'taskBeginTime'
          },
          // {
          //   title: '流程编号',
          //   align: 'center',
          //   width: 80,
          //   dataIndex: 'processDefinitionId',
          //   ellipsis: true,
          //   // scopedSlots: { customRender: 'processDefinitionId' }
          // },
          // {
          //   title: '任务ID',
          //   align: 'center',
          //   width: 80,
          //   dataIndex: 'taskId'
          // },
          {
            title: '当前环节',
            align: 'center',
            width:90,
            // fixed: 'right',
            dataIndex: 'taskName'
          },{
            title: '操作',
            align: 'center',
            dataIndex: 'action',
            // fixed: 'right',
            width:80,
            scopedSlots: {customRender: 'action'}
          }
        ],
        path:"modules/bpm/task/form/FormLoading",
        formData:{},
        url: {
          list: "/api/erpmng/act/task/list",
          claim: "/api/erpmng/act/task/claim",
          ignore: '/api/erpmng/act/task/ignore',
          taskEntrust:"/api/erpmng/act/task/taskEntrust",
          taskForward:'/api/erpmng/act/task/taskForward',
          taskTransfer:"/api/erpmng/act/task/taskTransfer",
        },
        taskId: '',
        bpmBizTitle:"",
        signVisible: false,
        claimModel: {}
      }
    },
    methods: {
      handleOkNew(){
        this.signVisible = false
        this.handleClaim(this.claimModel)
      },
      handleClaimNew(record){
        this.signVisible = true
        this.claimModel = Object.assign({},record)
      },
      handleViewDetail(record){
        if (record.taskAssigneeName && record.taskAssigneeName != '') {
          this.handleProcess(record);
        } else {
          // this.handleClaim(record)
          // this.$refs.taskSignModal.deal()
          this.getProcessNodeInfo(record, 'sign');
        }
      },
      searchReset() {
        this.createTimeRange = []
        this.queryParam = {};
        this.model.userName ="";
        this.loadData(1);
      },
      selectUserOK: function(data){
        this.$set(this.model, 'userName',  data.realname)
        this.queryParam.userName = data.username;
      },
      handleSelect: function(){
        this.$refs.selectSingleUserModal.select();
      },
      handleProcess(record){
        this.getProcessNodeInfo(record);
      },
      handleIgnore(record){
        var that = this;
        var params = { taskId: record.id };// 查询条件
        this.$confirm({
          title: '确认忽略吗',
          content: '确认忽略后，当前单据将从您的待办中消失。请确认已查看详情，否则，请选择“取消”按钮!',
          cancelText: '确认',
          okText: '取消',
          okButtonProps: {
            props: {
              type: 'default'
            }
          },
          cancelButtonProps: {
            props: {
              type: 'primary'
            }
          },
           // 取消
          onOk: function() {
          },
          // 确认
          onCancel: function(){
            putAction(that.url.ignore, params).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.handleOk();
              } else {
                that.$message.warning(res.message);
                that.handleOk();
              }
            })
          },
        });
      },
      handleClaim(record){
        var that = this;
        var params = {taskId:record.id};//查询条件
        this.$confirm({
          title:"确认签收吗",
          content:"请确认已查看详情，否则，请选择“取消”按钮!",
          cancelText: '确认',
          okText: '取消',
          okButtonProps: {
            props: {
              type: 'default'
            }
          },
          cancelButtonProps: {
            props: {
              type: 'primary'
            }
          },
          // 取消
          onOk: function(){
            // putAction(that.url.claim, params).then((res) => {
            //   if (res.success) {
            //     that.$message.success(res.message);
            //     that.loadData();
            //   } else {
            //     that.$message.warning(res.message);
            //     that.loadData();
            //   }
            // })
          },
          // 确认
          onCancel: function(){
            putAction(that.url.claim, params).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.loadData();
              } else {
                that.$message.warning(res.message);
                that.loadData();
              }
            })
          },
        });
      },
      handleOk(){
        this.loadData();
      },
      selectEntruster(record){
        this.taskId = record.id;
        this.$refs.selectEntrusterModal.select(record);
        this.$refs.selectEntrusterModal.title="选择委托人";
        this.$refs.selectEntrusterModal.message = '委托后，当前待办单据将会转移过去，委托人办理后，办理记录会留在您的已办中。';
      },
      selectTransfer(record){
        this.taskId = record.id;
        this.$refs.selectTransferModal.select(record);
        this.$refs.selectTransferModal.title="选择转办人";
        this.$refs.selectTransferModal.message = '转办后，当前待办单据将会转移过去。';
      },
      selectForward(record) {
        this.taskId = record.id;
        this.bpmBizTitle = record.bpmBizTitle;
        this.$refs.selectForwardModal.select(record);
        this.$refs.selectForwardModal.title = '选择转发人';
        this.$refs.selectForwardModal.message = '转发后，当前单据信息会知会给转发人。';
      },
      handleTransfer(data){
        var that = this;
        var params = {
          taskId:this.taskId,
          taskAssignee:data.username
        };//查询条件
        console.log("转办",params)
        putAction(that.url.taskTransfer, params).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.loadData();
          } else {
            that.$message.warning(res.message);
            that.loadData();
          }
        })

      },
      handleEntruster(data){
        var that = this;
        var params = {
          taskId:this.taskId,
          taskAssignee:data.username
        };//查询条件
        console.log("委托",params)
        putAction(that.url.taskEntrust, params).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.loadData();
          } else {
            that.$message.warning(res.message);
            that.loadData();
          }
        })

      },
      //催办
      taskNotify(record){
        this.$refs.taskNotifyMeModal.notify(record);
        this.$refs.taskNotifyMeModal.title="催办提醒";
      },
      selectForward(record) {
        console.log(record);
        this.taskId = record.id;
        this.bpmBizTitle = record.bpmBizTitle;
        this.$refs.selectForwardModal.select(record);
        this.$refs.selectForwardModal.title = '选择转发人';
        this.$refs.selectForwardModal.message = '转发后，当前单据信息会知会给转发人。';
      },
      handleForward(data) {
        var that = this;
        var params = {
          taskId: this.taskId,
          bpmBizTitle: this.bpmBizTitle,
          taskAssignee: data.username
        };// 查询条件
        putAction(that.url.taskForward, params).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.handleOk();
          } else {
            that.$message.warning(res.message);
            that.handleOk();
          }
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  /** Button按钮间距 */
    .ant-card-body {
    margin-bottom: 18px;
  }

  .table-operator button {
    margin-bottom: 18px;
    margin-right: 5px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .anty-img-wrap {
    height: 25px;
    position: relative;
  }

  .anty-img-wrap > img {
    max-height: 100%;
  }

  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }
</style>